<template>
  <div>
    <el-input v-model="query"></el-input>
    <el-button @click="onSearch">search</el-button>

    <div v-if="error">error</div>
    <div v-else-if="loading">loading...</div>
    <div v-else>
      <ul>
        <li v-for="(item, index) of data.hits" :key="index">
          <a :href="item.url">{{ item.title }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, ref } from "vue";
import { useRequest } from "../hooks/useRequest";

export default defineComponent({
  name: "HelloWorld",
  props: {},
  setup: () => {
    let { query, loading, error, data, run } = useRequest(
      "https://hn.algolia.com/api/v1/search",
      {
        query: "vue",
      }
    );

    return {
      data,
      query,
      error,
      loading,
      onSearch: run,
    };
  },
});
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
